<template>
  <!-- sql日志 -->
  <div class="aui-card--fill scroll-box card-box">
    <div class="mod-sys__log-login pane-shell">
      <el-form :inline="true"
               @submit.native.prevent
               :model="dataForm"
               :rules="dataRule"
               ref="dataForm"
               @keyup.enter.native="search">
        <el-form-item prop="AL_username">
          <el-input v-model.trim="dataForm.AL_username"
                    :placeholder="$t('logLogin.creatorName')"
                    clearable></el-input>
        </el-form-item>
        <el-form-item prop="influence">
          <el-input v-model.trim="dataForm.influence"
                    :placeholder="$t('logSql.holdInfluence')"
                    clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-date-picker v-model.trim="date"
                          type="datetimerange"
                          value-format="yyyy-MM-dd HH:mm:ss"
                          range-separator="至"
                          start-placeholder="开始日期"
                          end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <!-- v-if="$hasPermission('system:sysLogSql:page')" -->
          <el-button type="primary"
                     @click="search()">{{ $t('query') }}</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary"
                     plain
                     v-if="$hasPermission('system:sysLogSql:export')"
                     @click="exportHandle()">{{ $t('export') }}</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="danger"
                     plain
                     v-if="$hasPermission('system:sysLogSql:deleteAll')"
                     @click="deletAll">{{ $t('deleteALL') }}</el-button>
        </el-form-item>
      </el-form>
      <el-table v-loading="dataListLoading"
                :data="dataList"
                border
                @sort-change="dataListSortChangeHandle"
                style="width: 100%;">
        <el-table-column prop="username"
                         :label="$t('logSql.username')"
                         header-align="center"
                         align="center"></el-table-column>
        <el-table-column prop="note"
                         :label="$t('logSql.note')"
                         header-align="center"
                         width="200"
                         :show-overflow-tooltip="true"
                         align="center">
        </el-table-column>
        <el-table-column prop="uri"
                         :label="$t('logSql.uri')"
                         sortable="custom"
                         header-align="center"
                         width="200"
                         :show-overflow-tooltip="true"
                         align="center">
        </el-table-column>
        <el-table-column prop="sqlStr"
                         :label="$t('logSql.sqlStr')"
                         header-align="center"
                         align="center"
                         width="200"
                         :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="params"
                         :label="$t('logSql.params')"
                         header-align="center"
                         align="center"
                         width="150"
                         :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="influence"
                         :label="$t('logSql.influence')"
                         sortable="custom"
                         header-align="center"
                         align="center"
                         width="180"></el-table-column>
        <el-table-column prop="excuteTime"
                         label="执行时长(ms)"
                         sortable="custom"
                         header-align="center"
                         align="center"
                         width="180"></el-table-column>
        <el-table-column prop="createDate"
                         :label="$t('logSql.createDate')"
                         sortable="custom"
                         header-align="center"
                         align="center"
                         width="180"></el-table-column>
      </el-table>
      <el-pagination :current-page="page"
                     :page-sizes="[10, 20, 50, 100]"
                     :total="total"
                     layout="total, sizes, prev, pager, next"
                     @size-change="pageSizeChangeHandle"
                     @current-change="pageCurrentChangeHandle">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import mixinViewModule from '@/mixins/view-module'
export default {
  mixins: [mixinViewModule],
  data () {
    return {
      mixinViewModuleOptions: {
        getDataListURL: '/system/sysLogSql/page',
        getDataListIsPage: true,
        exportURL: '/system/sysLogSql/export'
      },
      date: '',
      dataForm: {
        creatorName: '',
        status: '',
        influence: ''
      }
    }
  },
  computed: {
    dataRule () {
      return {
        AL_username: [
          { required: false, message: this.$t('validate.required'), trigger: 'change' },
          { min: 0, max: 50, message: '长度在 1 到 50 个字符', trigger: 'change' }
        ],
        influence: [
          { required: false, message: this.$t('validate.required'), trigger: 'change' },
          { min: 0, max: 50, message: '长度在 1 到 50 个字符', trigger: 'change' }
        ]
      }
    }
  },
  methods: {
    // 查询
    search () {
      this.$refs.dataForm.validate((valid) => {
        if (valid) {
          if (this.date !== null) {
            this.dataForm.startTime = this.date[0]
            this.dataForm.endTime = this.date[1]
          } else {
            this.dataForm.startTime = ''
            this.dataForm.endTime = ''
          }
          this.getPageInit()
        }
      })
    },
    deletAll () {
      this.$confirm(this.$t('prompt.info', { 'handle': this.$t('delete') }), this.$t('prompt.title'), {
        confirmButtonText: this.$t('confirm'),
        cancelButtonText: this.$t('cancel'),
        type: 'warning'
      }).then(async () => {
        this.dataListLoading = true
        this.$http.delete('/system/sysLogSql/deleteAll').then(({ data: res }) => {
          this.dataListLoading = false
          if (res.code !== 0) {
            if (res.code === 500) {
              this.$message.error('请求异常,请稍后再试')
            } else {
              this.$message.error(res.msg)
            }
            return
          }
          this.$message.success(this.$t('prompt.success'))
          this.getDataList()
        }).catch(() => {
          this.dataListLoading = false
        })
      })
    }
  }
}
</script>
